<template>
  <el-dialog show-close width="40%"
             :visible.sync="dialogVisible"
             :before-close="handleClose"
             append-to-body>
    <avue-form :option="option"
               v-model="formData" @submit="submitData"></avue-form>

  </el-dialog>
</template>

<script>
import {createMenu} from "@/api/start/formEngine/formApi";

export default {
  name: "createMenu",
  computed: {
    option() {
      return {
        column: [
          {
            label: '父级',
            prop: 'menuParentId',
            span: 24,
            type: "el-menu-tree-select",
            component: "el-menu-tree-select",
          },
          {
            label: '名称',
            span: 24,
            prop: 'menuLabel',
            rules: [{
              required: true,
              message: "请输入菜单名称",
              trigger: "blur"
            }]
          },
        ]

      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        parentId: null,
        label: "",
      },
      tableInfo: null,

    }
  },
  methods: {
    show(table) {
      this.formData = {}
      this.tableInfo = table
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false;
      this.formData = {}
    },
    submitData(form, done) {
      createMenu(this.tableInfo.id, form).then(res => {
        this.$emit("change")
        this.dialogVisible = false
      }).finally(() => done())
    }
  }
}
</script>

<style scoped>

</style>
